
<!DOCTYPE HTML>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>UMEDITOR 保存</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 引用UMEDITOR的样式资源 -->
    <link href="../../themes/default/_css/umeditor.css" type="text/css" rel="stylesheet">
    <!-- 引用保存按钮的图片样式 -->
    <link rel="stylesheet" href="css/btn.css">

    <!-- 引入UMEDITOR脚本支持文件 -->
    <script type="text/javascript" src="../../third-party/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../umeditor.config.js"></script>
    <!--开发版-->
    <script type="text/javascript" charset="utf-8" src="js/editor_api.js"></script>
    <!--使用版-->
    <!--<script type="text/javascript" charset="utf-8" src="../umeditor.all.js"></script>-->

    <!-- 主动引入语言文件资源，解决IE下语言加载失败的问题 -->
    <script type="text/javascript" src="../../lang/zh-cn/zh-cn.js"></script>

    <!-- 引用保存按钮插件支持脚本 -->

    <!-- 保存对应的按钮相关逻辑， 在这里创建一个按钮， 并且使得它可以添加到工具栏上 -->
    <!--
    <script src="js/btn.js"></script>
    -->

    <!-- 保存插件，实现保存功能 -->
    <!--
    <script src="js/save-plugin.js"></script>
    -->
</head>
<body>
<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor" style="width:800px;height:240px;">

</script>

<script type="text/javascript">

    //注册一个名为“save”的插件
    UM.plugins['save'] = function () {

        UM.commands[ 'save' ] = {

            execCommand: function (cmdName) {

                //在这里实现具体的命令的行为
                //当调用 editor.execCommand("save") 时， 该方法就会被调用
                //保存功能的实际代码由用户自己实现

                alert("触发保存功能");

            },
            //queryCommandState: function (cmdName) {

                //这里返回只能是 1, 0, -1
                //1代表当前命令已经执行过了
                //0代表当前命令未执行
                //-1代表当前命令不可用

                //在这里总是返回0， 这样做可以使保存按钮一直可点击
                //return Math.random()>0.5?1 : -1;
                //return 1;
            //},
            //声明该插件不支持“撤销／保存”功能， 这样就不会触发ctrl+z 和ctrl+y的记忆功能
            notNeedUndo: 1

        };
    };

    UM.registerUI('save', function( name ){

        //alert(name); 这个name及时registerUI的的第一个参数
        //该方法里的this指向编辑器实例

        var me = this,

        //实例化一个UMEDITOR提供的按钮对象
        $button = $.eduibutton({
            //按钮icon的名字， 在这里会生成一个“edui-icon-save”的className的icon box，
            //用户可以重写该className的background样式来更改icon的图标
            //覆盖示例见btn.css
            'icon': 'save',
            'title': me.options.lang === "zh-cn" ? "保存" : "save",
            'click': function(){
                //在这里处理按钮的点击事件
                //点击之后执行save命令
                me.execCommand( name );
            }
        });

        //在这里处理保存按钮的状态反射
        me.addListener( "selectionchange", function () {

            //检查当前的编辑器状态是否可以使用save命令
            var state = this.queryCommandState( name );

            //如果状态表示是不可用的( queryCommandState()的返回值为-1 )， 则要禁用该按钮
            $button.edui().disabled( state == -1 ).active( state == 1 );

        } );

        //返回该按钮对象后， 该按钮将会被附加到工具栏上
        return $button;

    });

    var editor = UM.getEditor('myEditor');
    var div = document.createElement("div");
    div.contentEditable = true;
    div.innerHTML = "111111122223333";
    document.body.appendChild( div );

</script>

<script type="text/plain" id="otherEditor" style="width:800px;height:240px;">
    heheda
</script>
<script>
    //var editor = UM.getEditor('otherEditor');
</script>
</body>
</html>